<template>
  <view :style="{ height: props.height, paddingBottom: safeArea?.bottom + 'px' }" class="container-component">
    <view class="left">
      <view class="amount-row"
        >合计<span class="price">￥</span
        ><span class="amount">{{ preferentialInfo?.activityAndCouponPreferentialAfterOrderAmount }}</span></view
      >
    </view>
    <view class="right">
      <view class="submit-order-bottom" @click="toSubmitOrder">提交订单</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import $store from '@/store'
import type { PreferentialInfo } from '@/types/response/shop'
const { safeArea } = $store.app.getSystemParam()

const props = defineProps({
  height: {
    type: String,
    default: '150rpx'
  },
  preferentialInfo: {
    type: Object as () => PreferentialInfo
  }
})

const emits = defineEmits<{
  (e: 'submitOrder'): void
}>()
// 提交订单
function toSubmitOrder() {
  emits('submitOrder')
}
</script>

<style scoped lang="scss">
.container-component {
  $container-lr-padding-size: 25rpx;

  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #00000009;
  background-color: #fff;

  .left {
    margin-left: $container-lr-padding-size;

    .amount-row {
      color: rgb(255 46 46);

      .amount {
        font-size: 40rpx;
        font-weight: 700;
      }
    }
  }

  .right {
    margin-right: $container-lr-padding-size;

    .submit-order-bottom {
      padding: 0 70rpx;
      height: 74rpx;
      border-radius: 37rpx;
      color: #fff;
      background: linear-gradient(to right, #ffe241, #ffe11d);
      line-height: 74rpx;
    }
  }
}
</style>
